//专题详情列表组件，专题详情页的左侧列表组件
<template>
  <div class="page-containter">
    <div class="page-content">
      <div class="content-left">
        <div class="search-box">
          <!-- 标题 -->
          <div class="search-header">
            <h4 class="search-name">
              当前搜索：<span class="search-keyword">【<b class="search-b">{{ keyword }}</b>】</span>
            </h4>
            <span class="article-count">共 {{ totalItems }} 篇</span>

          </div>
          <!-- 简介 -->
          <div class="search-description">
            <p> 根据搜索关键词对文章标题、摘要、分类、标签等信息进行匹配，并按照发布时间、热度、评论数等排序。</p>
          </div>
        </div>
        <div class="search-content" v-if="searchData.length">
          <ArticleOrder
              :active-value="activeTab"
              @tab-change="handleTabChange"
          />
          <ArticleList :articles="searchData" :loading="loading"
                       :error="error"/>
          <ArticlePagination
              :currentPage="currentPage"
              :page_size="pageSize"
              :totalItems="totalItems"
              :totalPages="totalPages"
              @page-change="handlePageChange"
          />
        </div>
        <div class="search-content" v-else><p> 没有搜索到相关文章，请尝试其他关键词。</p></div>
      </div>
      <div class="content-right">
        <!-- 右侧广告位 -->
        <TagList/>
        <RandomArticleList/>
        <CategoryArticleCard/>
        <FriendLinkCard/>
      </div>
    </div>
  </div>

</template>


<script setup>
import ArticleList from "@/components/articles/ArticleList.vue";
import ArticleOrder from "@/components/articles/ArticleOrder.vue";
import ArticlePagination from "@/components/articles/ArticlePagination.vue";
import TagList from "@/components/articles/card/TagList.vue";
import CategoryArticleCard from "@/components/articles/card/CategoryArticleCard.vue";
import RandomArticleList from "@/components/articles/card/RandomArticleList.vue";
import FriendLinkCard from "@/components/com/FriendLinkCard.vue";

// 获取当前路由的查询参数
const route = useRoute();
const router = useRouter();
const keyword = ref(route.query.search || ''); // 设置为响应式，并支持初始值
// 当前激活排序标签
const activeTab = ref('time');
// 获取搜索结果
const searchData = ref([]);
// 页码相关
const currentPage = ref(1)
const pageSize = ref(1) // 每页条数
const totalPages = ref(0) // 总页数
const totalItems = ref(0) // 总条数
const loading = ref(false) // 是否正在加载
const error = ref(null) // 错误信息

// 处理排序标签变化
const handleTabChange = (tabId) => {
  activeTab.value = tabId
  articles.value = [] // 清空旧数据
  currentPage.value = 1 // 重置页码
  getSearchData(); // 清空旧数据并重新获取数据
};
// 处理页码变化
const handlePageChange = (page) => {
  currentPage.value = page
  getSearchData()
}
const getSearchData = async () => {
  loading.value = true
  error.value = null
  try {
    const {data} = await axios.get('/api/cms/articles', {
      params: {
        search: keyword.value,
        order: activeTab.value,
        page: currentPage.value,
      }
    })
    route.params.title = keyword.value
    document.title = '搜索 - ' + keyword.value
    searchData.value = Array.isArray(data.results) ? data.results : []
    pageSize.value = data.page_size
    currentPage.value = data.page
    totalPages.value = data.total_pages
    totalItems.value = data.count
    loading.value = false
  } catch (err) {
    error.value = err.message
  }
};


onMounted(() => {
  // 获取搜索结果
  getSearchData();
});

// 监听路由变化，更新搜索关键词
watch(
    () => [route.query.search, activeTab.value, currentPage.value],
    ([searchVal, activeTabVal, currentPageVal]) => {
      keyword.value = searchVal;
      activeTab.value = activeTabVal;
      currentPage.value = currentPageVal;
      getSearchData();
    },
    {immediate: true}
);


</script>


<style scoped>
.content-left, .content-right {
  margin-top: 50px;

}

.search-box {
  background: var(--search-bg-color, #fff);
  border-radius: 8px;
  border: 1px solid #e2e6eb;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  font-family: Arial, sans-serif;
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}


.search-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--search-title-color);
  margin: 0;
  padding: 0;
  border-bottom: 2px solid var(--search-border-color, #17a2b8);
}

.search-keyword {
  color: var(--search-keyword-color, #17a2b8);
}

.search-keyword b {
  color: var(--search-keyword-b-color, #5fb878);
  font-weight: bold;
}

.article-count {
  font-size: 14px;
  color: #999;
}

/* 描述区域样式 */
.search-description {
  padding: 0.8rem 0;
  color: var(--search-text-color, #343a40);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  background: var(--search-bg-color, #fff);;
}
</style>
